<template>
  <div>
    <!-- 获取焦点添加=》类名=》focused -->
    <view class="search" :class="{ focused: isSearch }">
      <view class="sinput">
        <input
          type="text"
          placeholder="搜索"
          @focus="search"
          v-model="keyword"
          @input="searchPrd"
          @confirm="goResult"
        />
        <button @click="cancel">取消</button>
      </view>

      <!-- 搜索状态显示=》下边内容 -->
      <view class="scontent" v-show="isSearch">
        <template v-if="suggestList.length === 0">
          <div class="title">
            搜索历史
            <span class="clear" @click="clearHistory"></span>
          </div>
          <!-- 搜索历史 -->
          <div class="history">
            <navigator
              :url="`/pageone/list/index?query=${item}`"
              v-for="item in history"
              :key="item.index"
              >{{ item }}</navigator
            >
          </div>
        </template>
        <!-- 搜索建议商品 -->
        <scroll-view scroll-y class="result" v-else>
          <navigator url="/pages/goods/index" v-for="item in suggestList">
            {{ item.goods_name }}</navigator
          >
        </scroll-view>
      </view>
    </view>
  </div>
</template>

<script>
import request from '@/utils/request.js'
export default {
  data() {
    return {
      isSearch: false,
      keyword: '',
      suggestList: [],
      // 定时器ID
      timer: null,
      // 历史记录本地
      history: uni.getStorageSync('history') || []
    }
  },
  methods: {
    search() {
      this.isSearch = true
      const pageHight = uni.getSystemInfoSync().windowHeight + 'px'
      uni.hideTabBar()
      this.$emit('search', pageHight)
    },
    cancel() {
      this.isSearch = false
      uni.showTabBar()
      this.$emit('search', 'auto')
      this.suggestList = []
    },
    // 输入数据获取搜索列表
    searchPrd() {
      if (!this.keyword) return (this.suggestList = [])
      // 清除定时器
      this.timer && clearTimeout(this.timer)
      // 定时器
      this.timer = setTimeout(async () => {
        const { data: res } = await request({
          url: '/api/public/v1/goods/qsearch',
          data: {
            query: this.keyword
          }
        })
        console.log('建议商品', res)
        this.suggestList = res
      }, 500)
    },
    // 跳转到搜索内容 点击enter
    goResult() {
      this.history.push(this.keyword)
      // 去重
      this.history = [...new Set(this.history)]
      console.log('去重', this.history)
      uni.setStorage({
        key: 'history',
        data: this.history
      })
      console.log('最终h', this.history)
      uni.navigateTo({
        url: '/pageone/list/index?query' + this.keyword
      })
      this.keyword = ''
      this.suggestList = []
    },
    // 清除本地数据
    clearHistory() {
      this.history = []
      uni.removeStorageSync('history')
    }
  }
}
</script>

<style scoped lang="scss">
// 搜索
.search {
  display: flex;
  flex-direction: column;
  .sinput {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: #ff2d4a;
    position: relative;
    //伪元素
    &::after {
      position: absolute;
      top: 28rpx;
      left: 302rpx;
      content: '';
      width: 44rpx;
      height: 44rpx;
      line-height: 1;
      background-image: url(https://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;
    }
    input {
      background: #fff;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #bbb;
      border-radius: 5rpx;
    }
    button {
      display: none;
      margin-left: 20rpx;
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 5rpx;
      background: transparent;
      color: #666;
    }
  }
  &.focused {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    .sinput {
      display: flex;
      background: #eee;
      input {
        text-align: left;
        padding-left: 60rpx;
      }
      button {
        display: block;
      }
      &::after {
        left: 30rpx;
      }
    }
  }
  .scontent {
    background: #fff;
    position: relative;

    flex: 1;
    padding: 27rpx;
    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }
    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;
      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
